<template>
    <div class="tree-container">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" class="search" />
        <el-tree ref="comnTree" :lazy="lazy" :load="loadNode" :data="treeList" :node-key="nodeKey"
                 :highlight-current="highlightBd"
                 :default-expanded-keys="expandKey"
                 :filter-node-method="filterNode" :draggable="false" :allow-drop="allowDrop"
                 :allow-drag="allowDrag" class="tree-line" :expand-on-click-node="expandClickNode"
                 @node-click="handleLeftclick" @node-drag-start="handleDragStart"
                 @node-drag-enter="handleDragEnter"
                 @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"
                 @node-drag-end="handleDragEnd" @node-drop="handleDrop" @node-contextmenu="rightClick"
        >
            <span slot-scope="{ data }">
                <i :class="data?.icon ? data.icon : 'el-icon-folder-opened'" />
                <span class="tree_label">{{ data.authName }}</span>
            </span>
        </el-tree>
        <div v-show="menuVisible" class="box-menu" :style="{ left: menu_left + 'px', top: menu_top + 'px' }">
            <div v-show="firstLevel" @click="addSameLevelNode(0)">
                <i style="color: #409eff;" class="el-icon-circle-plus-outline" />&nbsp;&nbsp;同级增加
            </div>
            <div class="add" @click="addChildNode()">
                <i style="color: #409eff;" class="el-icon-circle-plus-outline" />&nbsp;&nbsp;子级增加
            </div>
            <div class="delete" @click="deleteNode()">
                <i style="color: #f56c6c;" class="el-icon-remove-outline" />&nbsp;&nbsp;删除节点
            </div>
            <div class="edit" @click="editNode()">
                <i style="color: #67c23a;" class="el-icon-edit" />&nbsp;&nbsp;修改节点
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Tree',
    props: {
        treeList: {
            type: Array,
            default: () => [{
                id: 1,
                label: '一级 1',
                isEdit: false,
                type: 'catalog',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    isEdit: false,
                    type: 'menu',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1',
                        isEdit: false,
                        type: 'submenu'
                    }, {
                        id: 10,
                        label: '三级 1-1-2',
                        isEdit: false,
                        type: 'submenu'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                isEdit: false,
                type: 'catalog',
                children: [{
                    id: 5,
                    label: '二级 2-1',
                    isEdit: false,
                    type: 'menu'
                }, {
                    id: 6,
                    label: '二级 2-2',
                    isEdit: false,
                    type: 'menu'
                }]
            }, {
                id: 3,
                label: '一级 3',
                isEdit: false,
                type: 'catalog',
                children: [{
                    id: 7,
                    label: '二级 3-1',
                    isEdit: false,
                    type: 'menu'
                }, {
                    id: 8,
                    label: '二级 3-2',
                    isEdit: false,
                    type: 'menu',
                    children: [{
                        id: 11,
                        label: '三级 3-2-1',
                        isEdit: false,
                        type: 'submenu'
                    }, {
                        id: 12,
                        label: '三级 3-2-2',
                        isEdit: false,
                        type: 'submenu'
                    }, {
                        id: 13,
                        label: '三级 3-2-3',
                        isEdit: false,
                        type: 'submenu'
                    }]
                }]
            }]
        },
        lazy: {
            type: Boolean,
            default: false
        },
        nodeKey: {
            // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
            type: String,
            default() {
                return 'menuId'
            }
        },
        defaultProps: {
            type: Object,
            default() {
                return {
                    children: 'children',
                    label: 'label'
                    // isLeaf: "leaf" //需要加叶子节点的页面
                }
            }
        }
    },
    data() {
        return {
            eleId: '',
            expandKey: [],
            expandClickNode: true,
            isShow: false,
            currentData: '',
            label: '',
            highlightBd: true,
            currentNode: '',
            menuVisible: false,
            firstLevel: false,
            filterText: '',
            maxexpandId: 4,
            menu_left: 0,
            menu_top: 0
        }
    },
    watch: {
        filterText(val) {
            this.$refs.comnTree.filter(val)
        }
    },
    mounted() {
        console.log(this.treeList, 'treeList')
    },
    methods: {
        NodeBlur(Node, data) {
            console.log(Node, data)
            if (data.label.length === 0) {
                this.$message.error('菜单名不可为空！')
                return false
            } else {
                if (data.isEdit) {
                    this.$set(data, 'isEdit', false)
                    console.log(data.isEdit)
                }
                this.$nextTick(() => {
                    this.$refs['slotTreeInput' + data.id].$refs.input.focus()
                })
            }
        },
        expandAll(bool) {
            if (this.expandClickNode == true) {
                var nodes = this.$refs.comnTree.store.nodesMap
                for (var i in nodes) {
                    nodes[i].expanded = bool
                }
            }
        },
        loadNode(node, resolve) {
            this.$emit('loadNode', node, resolve)
        },
        // 查询
        filterNode(value, data) {
            if (!value) return true
            return data.aliasName.indexOf(value) !== -1
        },

        allowDrop(draggingNode, dropNode, type) {
            if (dropNode.data.label === '二级 3-1') {
                return type !== 'inner'
            } else {
                return true
            }
        },
        allowDrag(draggingNode) {
            return draggingNode.data.label.indexOf('三级 3-2-2') === -1
        },
        // 鼠标右击事件
        rightClick(event, object, Node) {
            console.log(event, object)
            this.currentData = object
            this.currentNode = Node
            if (Node.level === 1) {
                this.firstLevel = true
            } else {
                this.firstLevel = false
            }
            this.menuVisible = true
            document.addEventListener('click', this.foo)
            // 将菜单显示在鼠标点击旁边定位
            this.menu_left = event.clientX - 220
            this.menu_top = event.clientY - 140
            this.$emit('handleRightClick', object, Node)

        },
        // 鼠标左击事件
        handleLeftclick(data) {
            this.foo()
            this.$emit('handleNodeClick', data)
        },
        //  取消鼠标监听事件 菜单栏
        foo() {
            this.menuVisible = false
            //  要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
            document.removeEventListener('click', this.foo)
        },
        // 增加同级节点事件
        addSameLevelNode() {
            this.$emit('addSameLevelNode', '新增', '同级新增')
            // this.$refs.tree.append(data, this.currentNode.parent)
        },
        // 增加子级节点事件
        addChildNode() {
            console.log(this.currentData)
            // console.log(this.currentNode)
            // if (this.currentNode.level >= 3) {
            //     this.$message.error('最多只支持三级！')
            //     return false
            // }
            // let id = Math.ceil(Math.random() * 100)
            // var data = { id: id, label: '新增节点' }
            // this.$refs.tree.append(data, this.currentNode)
            this.$emit('addSameLevelNode', '子级增加', this.currentData)
        },
        // 删除节点
        deleteNode() {
            // this.$refs.tree.remove(this.currentNode)
            this.$emit('addSameLevelNode', '删除', this.currentData)
        },
        // 编辑节点
        editNode() {
            console.log(this.currentData)
            this.$emit('addSameLevelNode', '编辑', this.currentData)
        },
        handleDragStart(node) {
            console.log('drag start', node)
        },
        handleDragEnter(draggingNode, dropNode) {
            console.log('tree drag enter: ', dropNode.label)
        },
        handleDragLeave(draggingNode, dropNode) {
            console.log('tree drag leave: ', dropNode.label)
        },
        handleDragOver(draggingNode, dropNode) {
            console.log('tree drag over: ', dropNode.label)
        },
        handleDragEnd(draggingNode, dropNode, dropType, ev) {
            console.log('tree drag end: ', dropNode && dropNode.label, dropType)
            this.$emit('allowDrop', draggingNode, dropNode, dropType, ev)
        },
        handleDrop(draggingNode, dropNode, dropType) {
            console.log('tree drop: ', dropNode.label, dropType)
        }
    }
}
</script>
<style scoped lang="scss">
.el-tree > .is-leaf {
    color: transparent;
}
.tree-container ::v-deep .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.tree-container ::v-deep .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

/*
  //有子节点 且已展开 */
.tree-container ::v-deep .el-tree-node__expand-icon.expanded.el-icon-caret-right::before {
    // background: url("../../assets/node-expand.png") no-repeat;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    font-size: 12px;
    background-size: 10px;
}

/*  //没有子节点 */
.tree-container ::v-deep .el-tree-node__expand-icon.is-leaf::before {
    background: transparent no-repeat 0 3px;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    font-size: 12px;
    background-size: 10px;
}

/* 点击节点时的选中颜色 */
.tree-container ::v-deep.el-tree-node.is-current > .el-tree-node__content {
    color: #3d5ecc !important;
}
.tree-container ::v-deep .el-tree-node__expand-icon {
    // margin-left: 15px;
}
.tree-container ::v-deep .el-tree-node__expand-icon.is-leaf {
    margin-left: 0;
}
.tree-container ::v-deep .el-tree-node {
    position: relative;
    padding-left: 16px;
}
.tree-container ::v-deep .el-tree-node__children {
    padding-left: 16px;
}
.tree-container ::v-deep .el-tree > .el-tree-node::before {
    border-left: none;
}
.tree-container ::v-deep .el-tree > .el-tree-node::after {
    border-top: none;
}
.tree-container ::v-deep .el-tree > .el-tree-node::before {
    border-left: none;
}
.tree-container ::v-deep .el-tree > .el-tree-node::after {
    border-top: none;
}
.tree-container ::v-deep .el-tree-node::before {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
}
.tree-container ::v-deep .el-tree-node::after {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
}
.tree-container ::v-deep .el-tree-node::before {
    border-left: 1px dashed #ccc;
    bottom: 0;
    height: 100%;
    top: -19px;
    width: 1px;
}
.tree-container ::v-deep .el-tree-node::after {
    border-top: 1px dashed #ccc;
    height: 25px;
    top: 20px;
    width: 20px;
}
.el-tree-node :last-child::before {
    height: 40px;
}
.tree-container {
    // margin: 10px;
    // border-right: 1px solid #121314;
    font-size: 14px;
}
.tree-container ::v-deep .el-tree .el-tree-node {
    position: relative;
}
.tree-container ::v-deep .el-tree-node .el-tree-node__content {
    height: 34px;
    padding-left: 0 !important;
    border: none;
}
.tree-container ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #165dff1a;
    color: #165dff !important;
}
.tree-container ::v-deep .el-tree-node .el-tree-node__content::before {
    border-left: 1px dashed #ccc;
    height: 100%;
    top: 0;
    width: 1px;
    margin-left: 1px;
    margin-top: 0;
    z-index: 8;
}
.tree-container ::v-deep .el-tree-node .el-tree-node__children .el-tree-node__content::before {
    border-left: 0 dashed #ccc;
    height: 100%;
    top: 0;
    width: 1px;
    margin-left: 1px;
    margin-top: 0;
    z-index: 8;
}
.tree-container ::v-deep .el-tree-node .el-tree-node__content::after {
    border-top: 1px dashed #ccc;
    height: 1px;
    top: 18px;
    width: 13px;
    margin-left: 1px;
    z-index: 8;
}
.tree-container ::v-deep .el-tree-node .el-tree-node__children .el-tree-node__content::after {
    border-top: 0 dashed #ccc;
}
.tree-container .el-tree-node .el-tree-node__content::before,
.tree-container .el-tree-node .el-tree-node__content::after {
    content: "";
    position: absolute;
    right: auto;
}
.el-tree {
    width: 100%;
    margin-top: 10px;
    color: #121314;
}
.search {
    width: 100%;
}
.item {
    padding: 18px 0;
}
.search {
    cursor: pointer;
}
.box-menu {
    width: 120px;
    position: absolute;
    z-index: 1000;
    @include themeify {
        color: themed('g-tanchuan-main');
        background-color: themed('g-page-main');
    }

    box-shadow: 0 0 10px #0000001a;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    div {
        cursor: pointer;
        line-height: 30px;
    }
    div:active {
        color: #165dff;
    }
}
</style>
